import React, { useEffect, useState } from "react"
import { Col, Row, message, Card, Pagination, Input,Button } from 'antd';
import { ArrowLeftOutlined} from '@ant-design/icons';
import { get } from '../../util/get';
import { useNavigate } from 'react-router-dom';
import style from "./index.module.css"
const { Meta } = Card;
const { Search } = Input;
export default function StoreList() {
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const navigate = useNavigate()
    const token = localStorage.getItem('TOKEN')
    const getShopList = async () =>{
        const res = await get(`/shop/shop/list?page=${page}&limit=10`, token)
        const { code, page: { list, totalCount }, msg } = res.data
        if (code === 0) {
            setList(list)
            setTotal(totalCount)
        }
        else message.error(msg);
    }
    useEffect(() => {
       getShopList()
    }, [token, page])
    const onSearch = async (name) => {
        const res = await get(`/shop/shop/list?key=${name}`, token)
        // console.log(res,'search');
        const {code,msg,page:{list,totalCount}}= res.data
        if(!code){
            setList(list)
            setPage(1)
            setTotal(totalCount)
        }
        else message.error(msg);
    }
    const handleBack = async ()=>{
        getShopList();
    }
    return (
        <>
            <Row gutter={[32, 16]} className={style.storelist}>  
                <Search
                    addonBefore={<ArrowLeftOutlined onClick={handleBack} />}  
                    className={style.search}
                    placeholder="搜索您感兴趣的店铺吧😜"
                    allowClear
                    enterButton="我想看看"
                    size="large"
                    onSearch={onSearch}
                />
                {
                    list.map(item => {
                        return (
                            <Col key={item.id} >
                                <Card
                                    className={style.storeItem}
                                    hoverable
                                    style={{
                                        width: 250,
                                        height: 400
                                    }}
                                    cover={<img width={250} height={250} alt="example" src={item.image} />}
                                    key={item.id}
                                    onClick={
                                        () => {
                                            navigate(`/home/${item.id}`)
                                        }
                                    }
                                >
                                    <Meta title={item.name} description={
                                        <div>
                                            <div>地址：{item.address}</div>
                                            <div>电话：{item.phone}</div>
                                        </div>
                                    } />
                                </Card>
                            </Col>
                        )
                    })
                }
            </Row>
            <Pagination
                className={style.pagination}
                current={page} defaultPageSize={10}
                total={total} onChange={page => {
                    setPage(page);
                }} />
        </>


    )
}
